.app-inbox
  .messaging
    @include flex($direction: column)
    height: 100%
    width: 100%

    & > .heading
      padding: 20px
      width: 100%
      background-color: $white
      color: $grey-darkest
      border-bottom: 1px solid $grey

      .badge
        margin-left: 10px
        font-size: 0.7em
        &.badge-success
          background-color: $green

    ul.chat
      flex: 1
      @include flex($direction: column)
      background-color: $white
      width: 100%
      list-style: none
      padding: 0
      margin: 0
      overflow: auto

      & > li
        padding: 20px
        padding-top: 0
        padding-right: 20%

        .message
          background-color: $grey-lighter
          border-radius: 3px
          padding: 15px

        .info
          padding: 5px 0
          font-size: 0.85em
          color: $grey-darkest
          @include flex($justify: flex-start)

          & > *
            margin-right: 10px

        &.right
          align-self: flex-end
          padding-left: 20%
          padding-right: 20px
          text-align: right

          .message
            text-align: left

          .info
            @include flex($justify: flex-end)
            & > *
              margin-left: 10px
              margin-right: 0px

        &.line
          width: 100%
          position: relative
          text-align: center
          font-size: 0.9em
          z-index: 2
          padding-right: 20px
          padding-top: 20px
          color: $grey-darkest

          .title
            background-color: $white
            position: relative
            z-index: 2
            width: 140px
            margin: 0 auto
          &:after
            content: ''
            position: absolute
            width: 50%
            bottom: 50%
            left: 50%
            transform: translate(-50%, 0)
            z-index: 1
            border-bottom: 1px solid $grey

  .chat-group
    height: 100%
    width: 100%
    @include flex($direction: column)
    .heading
      width: 100%
      padding: 20px
      background-color: $white
      color: $grey-darkest
      border-right: 1px solid $grey
      border-bottom: 1px solid $grey
    ul.group
      background-color: $white
      flex: 1
      width: 100%
      box-shadow: 0 2px 2px rgba(68, 68, 68, 0.2)
      padding: 0
      list-style: none
      margin-bottom: 0
      border-right: 1px solid $grey
      overflow: auto

      & > li
        padding: 20px
        &.section
          padding: 6px 20px
          background-color: $grey-lighter
          border-bottom: 1px solid $grey
          color: $grey-darkest
          font-size: 0.9em

        &.message
          padding: 0
          border-bottom: 1px solid $grey
          a
            display: block
            text-decoration: none
            color: $black
            padding: 20px

            .message
              @include flex($align: center)
              .content
                flex: 1
                .title
                .description
                  font-size: 0.8em
                  opacity: 0.4
              .profile
                width: 40px
                height: 40px
                border-radius: 50%
                margin-right: 8px

          span.badge
            border-radius: 3px
            font-weight: 400
            font-weight: 0.8em
